import React from 'react';
import { Modal } from 'antd';
import BraftEditor from 'braft-editor';
import FileUpload from '@/components/Custom/FileUpload';

const FieldModal = React.forwardRef((props, ref) => {
    const [visible, setVisible] = React.useState(false);
    const [data, setData] = React.useState('');

    React.useImperativeHandle(ref, () => ({
        show: dataVal => {
            setData(dataVal);
            setVisible(true);
        }
    }));

    return (
        <Modal
            width={800}
            title="预览模板"
            visible={visible}
            destroyOnClose
            footer={null}
            onCancel={() => setVisible(false)}
        >
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
                主题：
                <div className="bf-container" style={{ padding: 8, flex: 1, minHeight: 32 }}>
                    {data?.subject}
                </div>
            </div>
            <BraftEditor
                controls={[]}
                readOnly
                contentStyle={{ height: 480 }}
                style={{
                    marginBottom: 16
                }}
                value={BraftEditor.createEditorState(data?.openingRemarks || null)}
            />
            <div style={{ marginBottom: 50 }}>
                <FileUpload value={data?.resourceRelation} disabled>
                    附件
                    {data?.resourceRelation?.allFileList?.length > 0
                        ? `${data?.resourceRelation?.allFileList?.length}个`
                        : ''}
                </FileUpload>
            </div>
        </Modal>
    );
});

export default FieldModal;
